<template>
  <el-header style="text-align: right; font-size: 12px;width: 100%;height: 63px;background-color: #545c64"
             text-color="#fff">
    <el-menu
        router
        :default-active="$router.path"
        style="margin: 0;padding: 0;height:64px;width: 100%"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item index="/index" >网站首页</el-menu-item>
      <el-submenu index="2">
        <template slot="title">管理台面</template>
        <el-menu-item index="/countIndex">统计</el-menu-item>
        <el-menu-item index="/home">用户信息管理</el-menu-item>
        <el-menu-item index="/donorinfo">献血者信息管理</el-menu-item>
        <el-menu-item index="/bloodbanks">血液库存信息</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">其他</template>
          <el-menu-item index="/history">献血记录</el-menu-item>
          <el-menu-item index="/distribute">血液发放信息</el-menu-item>
          <el-menu-item index="/sites">献血站点</el-menu-item>
          <el-menu-item index="/cars">献血车</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="/person">个人中心</el-menu-item>
      <el-menu-item index="/login">退出系统</el-menu-item>
      <el-dropdown style="margin-left: -500px;margin-top: -20px">
        <img :src="image" style="width:50px;height:50px;border-radius:20%;margin-left: -450px;margin-top: 25px">
        <el-dropdown-menu class="dropdownMenu" style="margin-top: -10px;background-color: #545c64">
          <el-dropdown-item v-if="$route.path != '/person'">
            <router-link style="text-decoration:none;color: white" class="a" to="/person">个人中心</router-link>
          </el-dropdown-item>
          <el-dropdown-item v-else="$route.path != '/home'">
            <router-link style="text-decoration:none;color: white" class="a" to="/home">用户信息</router-link>
          </el-dropdown-item>
<!--          <el-dropdown-item v-show="$route.path == '/person'" style="color: white;" @click.native="openChangePwdDialog">修改密码</el-dropdown-item>-->
          <!-- When we need to add a method on components,it's necessary to add native -->
          <el-dropdown-item @click.native="logout" style="color: white">退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-menu>
    <el-dialog
        style="text-align: left"
        title="修改密码"
        :visible.sync="ChangePwdDialog"
        width="30%">
      <span>修改密码</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="ChangePwdDialog = false">取 消</el-button>
          <el-button type="primary" @click="ChangePwdDialog = false">确 定</el-button>
        </span>
    </el-dialog>
  </el-header>


</template>
<script>
export default {
  name: "Header",
  data(){
    return{
      username:this.username,
      image:this.image,
      ChangePwdDialog:false,
      nowTime:''
    }
  },
  created(){
    this.userinfo=JSON.parse(window.localStorage.getItem('name'))
    this.username=this.userinfo.name
    this.image=this.userinfo.image

  },
  mounted() {
    // this.startPolling(); // 页面加载完成后开始轮询
    // setInterval(this.getNowDatetime, 1000);
  },
  beforeDestroy() {
    this.stopPolling(); // 组件销毁前停止轮询，防止内存泄漏
  },
  methods:{
    logout(){
      // clear the data in localStorage
      localStorage.clear()
      this.$router.push('/login')
      this.window.location.reload()
    },
    openChangePwdDialog(){
      this.ChangePwdDialog = true
      console.log("111")
    },
    getNowDatetime() {
      var date = new Date();
      var sign2 = ":";
      var year = date.getFullYear() // 年
      var month = date.getMonth() + 1; // 月
      var day = date.getDate(); // 日
      var hour = date.getHours(); // 时
      var minutes = date.getMinutes(); // 分
      var seconds = date.getSeconds() //秒
      var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
      var week = weekArr[date.getDay()];
      // 给一位数的数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      this.nowTime =  year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
    },
    stopPolling() {
      clearInterval(this.intervalId);
    }
  }
}

</script>
<style>
a:visited {
  color: rgba(0, 0, 0, 1);
}
.el-popper.dropdownMenu {
  background-color: red;
  .el-dropdown-menu__item {
    color: #fff !important;
  }
  .popper__arrow::after {
    border-bottom-color: #545c64 !important;
    border-top-color: #545c64 !important;
  }
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background: #272725 !important;
  }
}
</style>